<template>
  <div class="container">
    <div style="margin: 10px 0">
      <el-carousel height="390px">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="pic">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="margin: 10px 0">
<!--      <el-row :gutter="10">-->
<!--        <el-col :span="6" v-for="item in files" :key="item.id" style="margin-bottom: 10px">-->
<!--          <div style="border: 1px solid #cccccc;padding-bottom: 10px">-->
<!--            <img :src="item.url" alt="" style="width: 100%">-->
<!--            <div style="color: #666666;padding: 10px 0;">{{ item.name }}</div>-->
<!--            <el-button type="primary" style="margin: 0 10px">按钮</el-button>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-card style="margin: 10px 0">
        <div style="padding-bottom: 20px;font-size: 24px;color: #409EFF;font-weight: bold">系 统 公 告</div>
        <el-collapse v-model="activeName" accordion v-for="(item,index) in notice">
          <el-collapse-item :name="index + ''">
            <template slot="title">
              <span style="font-size: 20px;font-weight: bold">{{ item.title }}</span><i class="el-icon-warning-outline"></i>
              <span style="margin-left: 20px">{{ item.createTime }}</span>
            </template>
            <div style="padding: 10px 0"><el-image :src="item.img"></el-image></div>
<!--            <div>{{ item.content }}</div>-->
            <div v-html="item.content"></div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      imgs: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ],
      files: [],
      activeName: ['0'],
      notice: []
    }
  },
  methods: {
    loadNotice() {
      this.request.get("/notice").then(res => {
        this.notice = res.data.splice(0,5)
      })
    }
  },
  created() {
    this.loadNotice()
    // this.request.get("/test/front/all").then(res => {
    //   this.files = res.data.filter(v => v.type === 'jpeg' || v.type === 'jpg')
    // })
  }
}
</script>

<style scoped>

</style>